import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity, Image, FlatList, TextInput, PixelRatio, Animated
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { style } from '../../../theme/style';
import { CURRENCY } from '../../../utils/helper';
import MethodUtil from '../../../utils/MethodUtil'
import { OrderCommon } from '../../order-new/_common/common';

const scale = GLOBAL.SCALE;
const downArrow = require('../../../imgs/order/down.png')

export class ApprovingItem extends Component {

  constructor(props) {
    super(props)
    this.state = {
      itemData: {},
      showItem: false,
      imgRoute: new Animated.Value(1)
    }
  }

  componentWillMount () {
    this._init()
  }

  _init () {
    let { data, status, statusName } = this.props;
    let { orderItemList } = data || {};
    let boxHeight = new Animated.Value(62 * scale);
    let openHeight = 0;

    if (orderItemList && orderItemList.length > 0) {
      openHeight = openHeight + 60 * scale * orderItemList.length
    } else {
      orderItemList = []
    }

    this.setState({
      itemData: data,
      status,
      statusName,
      openHeight,
      boxHeight
    })
  }

  // 商品展开和隐藏
  toggleProduct = () => {
    let { showItem, openHeight, boxHeight, imgRoute } = this.state;

    showItem = !showItem;
    Animated.spring(boxHeight, {
      duration: 300,
      toValue: showItem ? openHeight : 62 * scale,
    }).start();
    Animated.timing(imgRoute, {
      duration: 300,
      toValue: showItem ? 0 : 1,
    }).start();

    this.setState({ showItem })
  }

  render () {
    let { itemData, status, statusName, boxHeight, imgRoute } = this.state;
    let { data, navigation, choice } = this.props;
    let { orderItemList, bizStaffName, bizTeamName, organName, orderId, orderType, createDate, tradeType, bizMode, companyName, longOrderId, totalQuantity, totalAmount, currency } = data || {};
    let goPage = status == 'zxy_order' || status == 'zxy_order_cancel' ? 'SinoNewOrderDetailPage' : 'OrderDetailsPage';
    let goParams = status == 'zxy_order' || status == 'zxy_order_cancel' ? {
      paramsData: {
        orderId,
        orderType,
        bizMode,
      }
    } : { orderId, choice };
    const spin = imgRoute.interpolate({
      inputRange: [0, 1],//输入值
      outputRange: ['180deg', '0deg'] //输出值
    })
    return (
      <TouchableOpacity activeOpacity={1} onPress={() => { navigation.navigate(goPage, goParams) }}>
        <View style={styles.spaceBetween}>
          <Text style={styles.grayText}>{companyName || '-'}</Text>
          <Text style={styles.grayText}>{(createDate || '-').substring(0, 16)}</Text>
        </View>
        <View style={styles.itemWrap}>
          <View style={styles.itemTopWrap}>
            <View style={styles.spaceBetween}>
              <View style={styles.spaceBetween}>
                <Text style={styles.commonText}>{orderId || '-'}</Text>
                <Image source={tradeType == 'I' ? OrderCommon.iconData.innerImg : OrderCommon.iconData.outerImg} style={styles.typeIcon} />
                <Image source={bizMode ? OrderCommon.iconData.backToBackImg : OrderCommon.iconData.openImg} style={styles.typeIcon} />
                {status == 'zxy_order' || status == 'zxy_order_cancel' ? <Image source={OrderCommon.iconData.newImg} style={styles.typeIcon} /> : null}
                {status == 'qh_order_abandone' ? <Image source={OrderCommon.iconData.quanHuaImg} style={styles.typeIcon} /> : null}
                {longOrderId ? <Image source={OrderCommon.iconData.executeImg} style={styles.typeIcon} /> : null}
                {status == 'zxy_order_cancel' ? <Image source={OrderCommon.iconData.withdrawImg} style={styles.typeIcon} /> : null}
                {status == 'qh_order_abandone' ? <Image source={OrderCommon.iconData.scrapImg} style={styles.typeIcon} /> : null}
              </View>
              <Text style={styles.statusText}>{statusName || '-'}</Text>
            </View>
            <Text style={{ fontSize: 10 * scale, paddingTop: 5 * scale, color: '#848A96' }}>(业务组织：{choice.corpName || '-'})</Text>
            <Text style={{ fontSize: 10 * scale, paddingTop: 5 * scale, color: '#848A96' }}>
              {bizStaffName || bizTeamName || organName ? `${bizStaffName || '-'} | ${bizTeamName || '-'} | ${organName || '-'}` : '--'}
            </Text>
          </View>
          <Animated.View style={[styles.itemMiddleWrap, orderItemList && orderItemList.length > 2 ? { paddingBottom: 16 * scale } : {}, { height: boxHeight, overflow: 'hidden' }]}>
            {
              orderItemList && orderItemList.length && orderItemList.map((item, index) => {
                const { goodsName, price, currency, quantity } = item;
                return (
                  <View key={index} style={{ marginBottom: 20 * scale }}>
                    <View style={styles.spaceBetween}>
                      <Text numberOfLines={2} style={styles.commonTextBold}>{goodsName || '-'}</Text>
                      <Text numberOfLines={2} style={[styles.commonTextBold, { textAlign: 'right' }]}>{CURRENCY.getUnit(currency || 'RMB').label} {MethodUtil.toThousands(price, 2)}{CURRENCY.getUnit(currency || 'RMB').text}/吨</Text>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 6 * scale }}>
                      <Text numberOfLines={2} style={[styles.commonTextBold, { opacity: .8, textAlign: 'right' }]}>{quantity} 吨</Text>
                    </View>
                  </View>
                )
              })
            }
            {
              orderItemList && orderItemList.length > 2 && (
                <TouchableOpacity style={styles.arrowWrap} onPress={() => this.toggleProduct()}>
                  <Animated.Image style={{ width: 14 * scale, height: 16 * scale, transform: [{ rotate: spin }] }} source={downArrow} ></Animated.Image>
                </TouchableOpacity>
              )
            }
          </Animated.View>

          <View style={styles.itemBottomWrap}>
            <Text style={styles.commonText}>共{totalQuantity || 0}吨，合计<Text style={{ fontWeight: 'bold' }}>{CURRENCY.getUnit(currency || 'RMB').label} {totalAmount || 0}</Text>{CURRENCY.getUnit(currency || 'RMB').text}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  spaceBetween: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  itemWrap: {
    backgroundColor: '#fff',
    marginBottom: 30 * scale,
    borderRadius: 6 * scale,
    marginTop: 6 * scale,
  },
  itemTopWrap: {
    borderBottomColor: '#D8D8D8',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderStyle: 'solid',
    paddingLeft: 14 * scale,
    paddingRight: 14 * scale,
    paddingBottom: 10 * scale,
    paddingTop: 10 * scale,
  },
  itemMiddleWrap: {
    paddingTop: 16 * scale,
    paddingLeft: 14 * scale,
    paddingRight: 14 * scale,
    position: 'relative',
  },
  itemBottomWrap: {
    borderTopColor: '#D8D8D8',
    borderTopWidth: 1 / PixelRatio.get(),
    borderStyle: 'solid',
    paddingLeft: 14 * scale,
    paddingRight: 14 * scale,
    paddingTop: 14 * scale,
    paddingBottom: 14 * scale,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  arrowWrap: {
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    paddingTop: 10 * scale,
    paddingBottom: 10 * scale,
    width: '100%',
    marginLeft: 12 * scale
  },
  grayText: {
    fontSize: 12 * scale,
    color: '#848A96'
  },
  commonText: {
    fontSize: 13 * scale
  },
  statusText: {
    fontSize: 13 * scale,
    color: '#F60202'
  },
  commonTextBold: {
    flex: 1,
    fontSize: 13 * scale,
    fontWeight: 'bold'
  },
  typeIcon: {
    width: 16 * scale,
    height: 16 * scale,
    marginLeft: 5 * scale,
  }
})